OOCSS Object-Oriented CSS

オブジェクト指向のCSS

提案者:Nicole Sullivan

解決する課題、提供するもの

CSSの既存の課題

再利用されないcodeがたくさんあり、CSSファイルのサイズが大きくなっている

CSSが壊れやすい

原則

Separate structure and skin (構造とスキンを分離する)

Separate container and content (コンテナとコンテンツの分離)

Separate structure and skin (構造とスキンを分離する)

スキン

繰り返し使われる視覚的な機能（背景や境界線のスタイルなど）を個別の「スキン」(class)として定義

スキンを様々なオブジェクトと組み合わせて使うことで、多くのコードを使わずに視覚的なバリエーションを得ることができる

スキンclassを使ってオブジェクトとそのコンポーネントに名前を付ける

直接HTML要素にスタイルを割り当てないので、HTMLを柔軟に変更可能に

Separate container and content (コンテナとコンテンツの分離)

場所に依存したスタイルをほとんど使わないこと

CSSオブジェクトは、どこに置いても同じように見えるべき

X特定の<h2>を.myObject h2 {...}でスタイリング

○<h2 class="category">のように、該当する<h2>を記述するクラスを作成して適用

これにより、以下のことが保証されます。

(1) クラス化されていない <h2> はすべて同じに見える

(2) カテゴリクラスを持つ要素 (mixin と呼ばれる) はすべて同じに見える

(3) 実際に .myObject h2 を通常の <h2> のように見せたい場合には、オーバーライドスタイルを作成する必要はない。(クラスを外すだけ)

前提

CSSオブジェクト

繰り返される視覚的なパターンのこと